Skip to content

feat(deck): visual polish — circular avatars, Inter font, token-derived palette, tinted agent icons - #580

Merged
danshapiro merged 16 commits into
mainfrom
feat/deck-icons-polish
Jul 30, 2026
Merged

feat(deck): visual polish — circular avatars, Inter font, token-derived palette, tinted agent icons#580
danshapiro merged 16 commits into
mainfrom
feat/deck-icons-polish

Conversation

@danshapiro

Copy link
Copy Markdown
Owner

Visual polish of the Stream Deck "Status icons" tile style (follow-up to #576). Client-only.

  • Letter avatars are now exact canvas replicas of the app's RepoIcon: letter in a circle, same color-derivation algorithm (shared code), matching shape/color/proportions with the tab bar.
  • All deck text (titles, avatars, pager, action layer, touch strip) renders in Inter, bundled locally (no CDN), with a font-ready repaint and clean sans-serif fallback before load.
  • Tile palette re-derived from the app's own design tokens, with a documented deck-constant → app-token mapping comment to prevent drift.
  • The bottom-center status dot is replaced by pane-style icons: repo icon plus miniature coding-agent icons side by side (mirroring the tab bar's pane icons), each agent icon tinted by status (blue busy, green running), with a "+N" overflow badge. Includes a repaint-on-icon-ready fix — without it, agent icons would never appear because the controller skips repaints for unchanged key data.
  • Classic "Terminal previews" style, sorting, and interaction are untouched.

Quality: TDD throughout; plan review formally PASSED (3 rounds); independent delta review passed round 1 with zero blockers (hand-verified color conversions and badge/slot arithmetic); full suites green (client 4604 / server 4656 / integration 350); lint + typecheck clean. Non-blocking follow-ups noted in review logs (dead DeckTab.dot field, skip loading icons hidden behind the +N badge).

danshapiro and others added 16 commits July 29, 2026 13:47
Assumption audit results (7 verified, 1 falsified):
- FALSIFIED: controller repaint diff-skips unchanged KeySpec JSON, so
  ready-less paneIcons would never appear after async decode. Reworked
  Tasks 6/9/10/11: buildFrame stamps frame-time ready via
  iconReady(providerIconDataUrl(...)), tint colors move to a shared
  pane-tint-colors.ts leaf module, renderer draws only ready entries,
  and Task 11 proves the false->true wire flip on the real controller.
- Fixed Task 2/Task 4 inconsistency: Task 4 now updates the avatar
  font assertion to DECK_FONT_STACK.
- Corrected Vite 5 -> Vite 6.4.1; noted latin-subset-only font load.
The badge was drawn at last.x + last.size + ICON_GAP, outside the
centered icon row with no width accounting, clipping off 80px keys in
the standard overflow case (repo + 2 agents). iconLayout only fits 3
slots on-key, so the badge now OCCUPIES A ROW SLOT: drawn agent icons
shrink so repo + agents + badge never exceed MAX_ROW_SLOTS (3), and the
badge renders centered in the reserved last slot. Tests updated with
badge position/bounds assertions (harness measureText stub = 6px/char)
and a MAX_KEY_PANE_ICONS-binding check without a repo icon.
…echeck (fresheyes review)

The plan's providerIconSvg implementation indexed
Record<CodingCliProviderName, ...> with an open string, which is TS7053
under strict and would break the later 'npm run typecheck — clean'
verification gates (Tasks 8, 10, 11). Use the same
'as keyof typeof PROVIDER_ICONS' cast the repo already uses in
session-type-utils.ts.
🤖 Generated with Amplifier

Co-Authored-By: Amplifier <[email protected]>
…icons polish

Adds two full-pipeline proof tests to the tile-styles e2e block:
- busy agent pane surfaces as a blue-tinted paneIcon on the wire from
  real store state (pre-decode ready:false wire shape)
- pane icon flips ready false->true on the wire when its tinted data
  URL decodes, proven on the REAL DeckController + IconImageCache
  (the A1 falsification fix: readiness stamping defeats the JSON
  diff-skip that would otherwise swallow the post-decode repaint)

Also removes the now-dead DeckTab.dot field (Task 9 deleted its only
consumer when the KeySpec dot was replaced by paneIcons; the brief's
stray-dot grep flagged it). tile-state.ts stays untouched per the
pinned-module constraint; tileDot remains covered by its own suite.

docs/index.html has no deck depiction (grep clean) - left untouched.

🤖 Generated with [Amplifier](https://github.com/microsoft/amplifier)

Co-Authored-By: Amplifier <[email protected]>
… dot stays; only the icons KeySpec lost it)

🤖 Generated with [Amplifier](https://github.com/microsoft/amplifier)

Co-Authored-By: Amplifier <[email protected]>
@danshapiro
danshapiro merged commit 0ec1bfe into main Jul 30, 2026
3 checks passed
@danshapiro
danshapiro deleted the feat/deck-icons-polish branch July 30, 2026 03:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant